<template>
    <div class="userInfo">
       <div class="baseInfo">
           <van-image
            round
            width="40px"
            height="40px"
            style="margin-left:10px"
            :src="userInfo ? userInfo.userBaseInfo.avatarUrl : 'https://img01.yzcdn.cn/vant/cat.jpeg'"/> 
            <div class="login-info">
                <span v-if="!userInfo" @click="goLogin">立即登录</span>
                <span v-else >{{userInfo.userBaseInfo.nickname }}</span>
                <van-icon size="16" name="arrow" />  
            </div>
           
       </div>

      <div class="info-item">
          <div class="wrapper-item">
              <div class="message">
              <div class="left">我的消息</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>
          <div class="center">
              <div class="left">云币中心</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>
          </div>
      </div>

      <div class="info-item2">
          <div class="wrapper-item">
              <div class="message">
              <div class="left">云村有票</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>
          <div class="center">
              <div class="left">商城</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>

           <div class="center">
              <div class="left">游戏专区</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>

           <div class="center">
              <div class="left">口袋彩铃</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>
          </div>
      </div>



      <div class="info-item3">
          <div class="wrapper-item">
              <div class="message">
              <div class="left">设置</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>
          <div class="center">
              <div class="left">夜间模式</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>

           <div class="center">
              <div class="left">定时关闭</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>

           <div class="center">
              <div class="left">个性装扮</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>

           <div class="center">
              <div class="left">边听边存</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>

           <div class="center">
              <div class="left">在线听歌免流量</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>

           <div class="center">
              <div class="left">音乐黑名单</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>

           <div class="center">
              <div class="left">青少年模式</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>

           <div class="center">
              <div class="left">音乐闹钟</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>
          </div>
      </div>

       <div class="info-item4">
          <div class="wrapper-item">
              <div class="message">
              <div class="left">我的订单</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>
          <div class="center">
              <div class="left">优惠卷</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>

           <div class="center">
              <div class="left">我的客服</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>

           <div class="center">
              <div class="left">分享网易云音乐</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>
           <div class="center">
              <div class="left">关于</div>
              <div class="right"><van-icon size="16" name="arrow" /> </div>
          </div>
          </div>
      </div>

        <div class="close">
            <div class="close-music">关闭云音乐</div>
        </div>
      
    </div>
</template>


<script>
import {mapState}  from 'vuex'
export default {
    name:'Popup',
    data(){
        return{
            
        }
    },
    computed:{
        ...mapState(['userInfo'])
    },
    methods:{
        goLogin(){
            this.$router.push('/login')
        }
    }

}
</script>


<style scoped lang="css">
.userInfo{
    height: 100%;
    position: relative;
    /* width: 100%; */
    width: 100%;
    background-color: #eeeeee;
    /* padding: 0 10px; */
}
.baseInfo{
    /* height: 10%; */
    width: 100%;
    background-color: #fff;
    /* padding: 0 20px; */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;
    /* width: 100%; */
    position: fixed;
    top: 0;
    z-index: 999;
    left: 0;
}
.login-info{
    font-size: 16px;
    
    padding-left: 20px;
    display: flex;
    align-items: center;
}
.van-icon-arrow{
    display: block;
    margin-top: 2px;
}
.vipcard{
    height: 10%;
    width: 100%;
    /* background: url('../../assets/image/vip-card.png')  no-repeat 10% 10%; */
    /* background-color: rgba(0, 0, 0, 0.2); */
}
.info-item{
    height: 20%;
    /* width: 100%; */
    background-color: #fff;
    /* padding: 0 20px; */
    border: 1px solid #eeeeee;
    margin-top: 21%;
}
.wrapper-item{
    /* border: 1px solid #eeeeee; */
    border-radius: 5px;
    /* padding: 5px; */
    margin-top: 20px;
}
.message,.center{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    /* margin-top: 10px; */
    /* padding-bottom: 1px; */
    padding: 10px;
    /* border-bottom: 1px solid #eeeeee; */
    
    
    
}
.info-item2{
    height: 25%;
    background-color: #fff;
}

.info-item3{
    height: 50%;
    background-color: #fff;
}
.info-item4{
    height: 25%;
    background-color: #fff;
}
.close{
    height: 10%;
    background-color: #fff;
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;


}
.close-music{
    text-align: center;
    width: 70%;
    font-size: 16px;
    color: #e70012;

}
</style>